<script setup>
import {onMounted, reactive} from 'vue'
import {useReservationSettingStore} from '@/store/reservationSetting'

const reservationSettingStore = useReservationSettingStore()
const {reservationSetting} = reservationSettingStore

const settingForm = reactive({
    s1: 0,
    preStartDays: 0,
    s2: 0,
    preEndHours: 0,
    preEndDays: 0,
    preEndTime: null,
    s3: 0,
    preCancelHours: 0,
    preCancelDays: 0,
    preCancelTime: null,
})

const save = () => {
    reservationSettingStore.setReservationSetting(settingForm)
}

const initData = () => {
    settingForm.s1 = reservationSetting.s1
    settingForm.preStartDays = reservationSetting.preStartDays
    settingForm.s2 = reservationSetting.s2
    settingForm.preEndHours = reservationSetting.preEndHours
    settingForm.preEndDays = reservationSetting.preEndDays
    settingForm.preEndTime = initDate(reservationSetting.preEndTime)
    settingForm.s3 = reservationSetting.s3
    settingForm.preCancelHours = reservationSetting.preCancelHours
    settingForm.preCancelDays = reservationSetting.preCancelDays
    settingForm.preCancelTime = initDate(reservationSetting.preCancelTime)
}

const initDate = (time) => {
    const [hours, minutes] = time.split(':').map(Number);
    const currentDate = new Date();
    return new Date(
        currentDate.getFullYear(),
        currentDate.getMonth(),
        currentDate.getDate(),
        hours,
        minutes,
        0,
        0
    );
}

onMounted(() => {
    initData()
})
</script>

<template>
    <el-form :model="settingForm" label-position="right" label-width="100px" style="margin-left: 50px; width: 500px">
        <el-form-item label="预约开始时间">
            <el-radio-group v-model="settingForm.s1">
                <el-radio :value="0">
                    不限制会员可提前预约课程的天数！
                </el-radio>
                <br>
                <el-radio class="ratio" :value="1">
                    会员最多可提前预约<el-input type="number" v-model="settingForm.preStartDays" style="width: 80px"/>天内的课程
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="预约截止时间">
            <el-radio-group v-model="settingForm.s2">
                <el-radio :value="0">
                    任意时间，均可预约
                </el-radio>
                <br>
                <el-radio class="ratio" :value="1">
                    预约截止时间:上课前<el-input type="number" v-model="settingForm.preEndHours" style="width: 80px"/>小时
                </el-radio>
                <br>
                <el-radio class="ratio" :value="2">
                    预约截止时间:上课前<el-input type="number" v-model="settingForm.preEndDays" style="width: 80px"/>天的<el-time-picker format="HH:mm" v-model="settingForm.preEndTime" style="width: 100px"/>
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="取消预约时间">
            <el-radio-group v-model="settingForm.s3">
                <el-radio :value="0">
                    在上课前任意时间，均可取消预约
                </el-radio>
                <br>
                <el-radio class="ratio" :value="1">
                    取消预约截止时间:上课前<el-input type="number" v-model="settingForm.preCancelHours" style="width: 80px"/>小时
                </el-radio>
                <br>
                <el-radio class="ratio" :value="2">
                    取消预约截止时间:上课前<el-input type="number" v-model="settingForm.preCancelDays" style="width: 80px"/>天的<el-time-picker format="HH:mm" v-model="settingForm.preCancelTime" style="width: 100px"/>
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped>
.ratio{
    margin-top: 10px;
}
</style>
